Slots and Component Communication (1/6)
How do you define and use a default slot?
In Svelte, a **slot** is a placeholder inside a component where you can insert content from the parent component. A **default slot** is the most common type of slot and is used when you want to pass children content without naming the slot.
To define a default slot, you use the `<slot></slot>` element inside a child component. This tells Svelte where the parent-provided content should be rendered.
Child component with default slot (`Card.svelte`)
When using the component, you can place any content between its opening and closing tags. That content will be inserted where the `<slot>` is defined.
Parent component using the `Card` component
You can also add fallback content inside a slot. This fallback will be displayed **only if no content is passed** from the parent.
Default slot with fallback content
Important details about default slots:
- The `<slot>` tag acts as a placeholder for parent-provided content.
- Default slots do not need a `name` attribute.
- Fallback content inside a slot is displayed when the parent provides nothing.
- You can mix default slots with **named slots** for more complex layouts.